import React from 'react'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import classNames from 'classnames'
import Image from '@/components/Image'
import dayjs from 'dayjs'
import { useDispatch, useSelector } from 'react-redux'
import { setMoreAction } from '@/store/actions/home'
import { useHistory } from 'react-router-dom'

export default function ArticleItem({ article, channelId }) {
  const islogin = useSelector((state) => !!state.login.token)
  const history = useHistory()
  const dispatch = useDispatch()
  const {
    cover: { type, images },
    title,
    aut_name,
    comm_count,
    pubdate,
  } = article

  return (
    <div
      className={styles.root}
      onClick={() => history.push('/article/' + article.art_id)}
    >
      <div
        className={classNames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item, i) => (
              <div className="article-img-wrapper" key={i}>
                <Image src={item} alt="" />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classNames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{aut_name}</span>
        <span>{comm_count}条评论</span>
        <span>{dayjs(pubdate).fromNow()}</span>
        <span className="close">
          {islogin && (
            <Icon
              type="iconbtn_essay_close"
              onClick={() =>
                dispatch(
                  setMoreAction({
                    visible: true,
                    articleId: article.art_id,
                    channelId,
                  })
                )
              }
            />
          )}
        </span>
      </div>
    </div>
  )
}
